領域 | 範例 |
---|---|
前端開發 | 操作 DOM、表單驗證、動畫效果 |
後端開發 | 使用 Node.js 建立 API 或 Web 服務 |
行動應用 | React Native、Ionic 等跨平台框架 |
桌面應用 | Electron 製作跨平台桌面軟體 |
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>更改</button>
</body>
</html>
2.JavaScript 改變 HTML 屬性值
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">開</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">關</button>
</body>
</html>
3.JavaScript 改變 HTML 樣式(CSS)
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">變大</button>
</body>
</html>
4.JavaScript 隱藏 HTML 元素
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">隱藏</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">顯示
</button>
</body>
</html>